<template>
  <div class="msg-wrap">
    <div :class="[messageBoxClass,'message-box']" ref="msgContentBox" :id="noNavLength == 'noNav'?'no-nav-msg-box':'msg-box'"  v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="50">
      <img class="report-img" v-show="isReport"
        :src="videoInfo.videoInfo.userAnchor.headImg +'?x-oss-process=image/resize,m_fixed,h_70,w_70'">
      <!-- <div class="report-box" v-show="isReport">
        <p>{{videoInfo.videoInfo.userAnchor.nickname}}</p>
        <img @click="reportBtn" src="../../../../assets/images/report-img.png">
      </div> -->
      <ul   class="sysInfo-ul">
        <li class="msg-li-li">
          <div class="li-msg-left">
            <img
              :src="videoInfo.videoInfo.userAnchor.headImg +'?x-oss-process=image/resize,m_fixed,h_70,w_70'">
          </div>
          <div class="li-msg-right">
            <p class="nickBox"><span class="nikeNameRuan">{{videoInfo.videoInfo.userAnchor.nickname}}</span><span
                id="comment-imgicon"></span> </p>
            <div class="connect-boxText" id="live-red">
              <div id="live-top-msg" v-html="videoInfo.videoInfo.memo"></div>
              <span class="icon-box" @click="clickToggle">
                <Iconfont v-show="isEllipsis && !isShow" iconClass="iconfont iconspread-line" />
                <Iconfont v-show="isEllipsis && isShow" iconClass="iconfont iconshouqi-copy" />
              </span>
            </div>
          </div>
        </li>
      </ul>
      <div v-if='isNoComment' class="no-comment-box">
        <p class="no-comment"></p>
      </div>
      <ul class="msg-content" ref="msgContent" @click="clickMsgContent" >
        <!--结构参考横屏直播间 -->
      </ul>
    </div>
    <div class="comment-footer">
        <div v-if="quickMessageList.length" :class="['quickMessage',{'quickMessage-zxjtqh':$channel=='zxjtqh' && getPlatform=='app'}]">
          <ul>
            <li v-for="(item,index) in quickMessageList" :key="index" @click="clickMessage(item)">{{item}}</li>
          </ul>
        </div>
        <div class="yk-cover" @click="ykCover" v-if="$store.state.isYk"></div>
        <div class="comment-box">
          <div class="input-big-box">
            <textarea ref="footerInputRu" @blur="blurRu" v-model="lookBackComment" type="text"  @focus="inputFocus"
              :placeholder="inputPlaceholder"></textarea>
            <p id="huikan_liuyan" :class="[sendClass]" @click="sendMsg">发送</p>
          </div>
          <div v-show='isIconShow && showShouCang' class="shoucang-box" @click="clickCollect">
            <i id="huikan_shoucang" :class="isCollect?'shoucangRed':'shoucang'" 
              aria-hidden="true"></i>
            <!-- <p>{{isCollect?'已收藏':'收藏'}}</p> -->
          </div>
          <!-- <div v-show='isIconShow' class="num-box">
            <i id="huikan_dianzan" ref="dianZan" @click="clickLike" :class="isZan?'zan-red':'zan-gray'"
              aria-hidden="true"></i>
          </div> -->
          <div v-show='isIconShow' class="num-box" @click="sendZan">
            <ClickLike :roomInfo="videoInfo" ref="clickLike"></ClickLike>
          </div>
        </div>
      </div>
  </div>
  
</template>

<script>
  import ClickLike from '@/components/ClickLike/ClickLike';
  import { collectOrLike, cancelCollectOrLike, getFollowState ,getBackMessageApi} from '@/util/api.js'
  export default {
    components:{
      ClickLike
    },
    props: {
      videoInfo: Object,
      noNavLength: String,
      isPublic: Boolean, //是否是公开直播间
    },
    data() {
      return {
        timer:null, //防抖定时器
        quickMessageList:[], //快捷消息回复
        quickMessage:"",//选中的快捷消息
        videoId: this.$route.params.id,
        sysInfo: this.$store.state.SysOrgInfo,
        messageArray: [], //评论列表信息
        page: 1,
        busy: false, //禁用滚动
        totalPage: '',
        getPlatform: fun.getPlatform(), //app wx
        isNoComment: false, //是否有评论
        currentUn: this.$store.state.userInfo.un, //当前用户un
        isEllipsis: false, //置顶留言是否显示了省略号
        isShow: true, //置顶留言展开与收起
        topMsgText: '', //保留收起样式
        messageBoxClass: '', //留言区域高度大小
        isZan: null, //是否点赞
        isCollect: null, //是否收藏
        isSend: false, //是否发送
        lookBackComment: '', //发送内容
        inputPlaceholder: '说点什么吧...',
        isIconShow: true, //是否展示输入框右侧图标
        sendClass: '', //发送按钮样式
        iconDataArray: [
          require('../../../../assets/images/zan/zan1.png'),
          require('../../../../assets/images/zan/zan2.png'),
          require('../../../../assets/images/zan/zan3.png'),
          require('../../../../assets/images/zan/zan4.png'),
          require('../../../../assets/images/zan/zan5.png'),
          require('../../../../assets/images/zan/zan6.png'),
          require('../../../../assets/images/zan/zan7.png'),
          require('../../../../assets/images/zan/zan8.png'),
          require('../../../../assets/images/zan/zan9.png'),
          require('../../../../assets/images/zan/zan10.png'),
          require('../../../../assets/images/zan/zan11.gif'),
          require('../../../../assets/images/zan/zan12.gif'),
        ],
        showShouCang: true,
        isReport: false, //举报dom
        isIos,
      }
    },

    async created() {
      //this.getLiveBackMsg()
      if (this.noNavLength == 'noNav') { //没有导航
          this.messageBoxClass = 'no-nav-message-box'
      } else { //有导航
          this.messageBoxClass = 'nav-message-box'
      }
      // isPl  是否允许评论 0 否 1是     plCk 评论审核 0 先发 1 先审后发
      //评论开关
      if (this.videoInfo.videoInfo.isPl == '0') { //禁止评论
        this.inputPlaceholder = '评论功能已关闭'
      } else if (this.videoInfo.videoInfo.isPl == '1') { //可以评论
        this.inputPlaceholder = '说点什么吧...'
      }
      if (this.videoInfo.hasOwnProperty('isLove') && this.videoInfo.isLove) { //有没有这个key
        this.isZan = true;
      } else {
        this.isZan = false;
      }
      // 查询是否收藏
      const liveStation = this.$route.query.liveStation === '1';
      if (liveStation) { // 来自直播小站
        try {
          const res = await getFollowState(this.videoId, 3);
          this.isCollect = res.data.data;
        } catch (error) {
          throw new Error(error);
        }
      } else {
        if (this.videoInfo.hasOwnProperty('querySc') && this.videoInfo.querySc) { //有没有这个key
          this.isCollect = true;
        } else {
          this.isCollect = false;
        }
      }
    },
    mounted() {      
      if(window.topmargin && this.$channel=='zxjtqh'){//仅app才会有window.topmargin
        let msgBox;
         if(this.noNavLength =='noNav'){//留言区域是否有导航
               msgBox = document.getElementById('no-nav-msg-box');
               fun.setBarHeight(msgBox,window.topmargin*2 + 299,true);
        }else{
               msgBox = document.getElementById('msg-box');
              fun.setBarHeight(msgBox,window.topmargin*2 + 324,true);
           }; 
      }
       
      fun.objBlurFun('textarea'); //ios下键盘弹出点击空白不收起问题
      this.getQuickMessage(); //获取直播快捷栏消息；
      this.topMsgStyle() //置顶留言样式
    },
    methods: {
      loadMore() {
        this.busy = true;
        this.getLiveBackMsg();
      },
      getMessageFirstList(){
          this.page = 1;
          this.busy = true;
          this.$refs.msgContent.innerHTML = ''
          this.getLiveBackMsg();
      },
      async  getLiveBackMsg(){
          try {
            const dataMsg = await getBackMessageApi(this.videoId,this.page);
            const {code,data} = dataMsg.data;
            if(code === '000000'){
                const { items , totalPage } = data;
                if(items.length){
                    if(items.length == 10){
                      this.page++;
							        this.busy = false;
                    }else{
                      this.busy = true;
                      fun.toastMessage('没有更多留言~')
                    }
                    this.renderMsgDom(items)
                }else{
                  if(this.page == 1){
                      this.isNoComment = true 
                  }else{
                    fun.toastMessage('没有更多留言~')
                  }
                  this.busy = true;
                }
            }
          } catch (error) {
            
          }             
      },
      renderMsgDom(arr){
        arr.forEach((ele, index) =>{
                      let li = document.createElement("li");
                      li.className = "msg-li-li";
                      let leftBox = document.createElement("div");
                      leftBox.className = "li-msg-left";
                      let img = document.createElement("img");
                      img.src = ele.avator && ele.avator != null && ele.avator +
                        '?x-oss-process=image/resize,m_fixed,h_70,w_70' || imgTx;
                      img.onerror = window.imgError;
                      leftBox.appendChild(img);
                      li.appendChild(leftBox);
                      let rightBox = document.createElement("div");
                      rightBox.className = "li-msg-right";
                      let p = document.createElement("p");
                      p.className = "nickBox";
                      let span1 = document.createElement("span");
                      span1.className = "nikeNameRuan";
                      span1.innerText = ele.ac == this.videoInfo.videoInfo.creator?'主播':ele.nick;
                      let span2 = document.createElement("span");
                      span2.className = "liveTimeRuan";
                      span2.innerText = ele.addTime;
                      p.appendChild(span1);
                      p.appendChild(span2);
                      rightBox.appendChild(p);
                      let contentBox = document.createElement("div");
                      contentBox.className = 'connect-boxText'
                      if (ele.type == '6' && this.isJSON(ele.content)) { //官方
                        let itemEle = JSON.parse(ele.content)
                        let span0 = document.createElement("span");
                        span0.className = "officialRuan";
                        span0.innerText = '官方';
                        p.insertBefore(span0, span1);
                        contentBox.className = "connect-boxText";
                        let replyBox = document.createElement("p");
                        replyBox.className = "reply-box";
                        let replyName = document.createElement("span");
                        replyName.className = "reply-name";
                        replyName.innerHTML = '@' + itemEle.parent.nickName;
                        let replyMsg = document.createElement("span");
                        replyMsg.className = "reply-msg";
                        replyMsg.innerHTML = itemEle.msg;
                        let repliedBox = document.createElement("div");
                        repliedBox.className = "replied-box";
                        let repliedInfo = document.createElement("p");
                        repliedInfo.className = "replied-info";
                        let repliedName = document.createElement("span");
                        repliedName.className = "replied-name";
                        repliedName.innerHTML = itemEle.parent.nickName;
                        let repliedTime = document.createElement("span");
                        repliedTime.className = "replied-time";
                        repliedTime.innerHTML = itemEle.parent.addTime
                        let repliedMsg = document.createElement("p");
                        repliedMsg.className = "replied-msg";
                        repliedMsg.innerHTML = itemEle.parent.message;
                        replyBox.appendChild(replyName)
                        replyBox.appendChild(replyMsg)
                        repliedInfo.appendChild(repliedName)
                        repliedInfo.appendChild(repliedTime)
                        repliedBox.appendChild(repliedInfo)
                        repliedBox.appendChild(repliedMsg)
                        contentBox.appendChild(replyBox);
                        contentBox.appendChild(repliedBox);
                      } else if (ele.ac.includes('zbzlpt') || ele.ac == this.videoInfo.videoInfo.creator) {
                        let span0 = document.createElement("span");
                        span0.className = "officialRuan";
                        span0.innerText = '官方';
                        p.insertBefore(span0, span1);
                        contentBox.className = "connect-boxText";
                        contentBox.innerText = ele.content;
                      } else {
                        if (ele.ac == this.currentUn) {
                          li.className = "msg-li-li highlight-me";
                          let spanMy = document.createElement("span");
                          spanMy.className = "my-tip";
                          spanMy.innerText = '我';
                          p.insertBefore(spanMy, span2)
                        }
                        contentBox.className = "connect-boxText";
                        contentBox.innerText = fun.searchIphoneNum(ele.content);
                      }
                      rightBox.appendChild(contentBox);
                      li.appendChild(rightBox);
                      this.$refs.msgContent.insertBefore(
                        li,
                        this.$refs.msgContent.childNodes[this.$refs.msgContent.childNodes.length + 1]
                      );
                    });
      },
      sendZan(e) {
        const { title, creator } = this.videoInfo.videoInfo;
        $sensorsTrack('liveBroadcast_liveRoomDetailsPageFunctionClick', {
          page_name: `回看详情页`,
          user_nickname: this.$store.state.userInfo.nickname,
          live_room_id: this.$route.params.id,
          live_room_name: title,
          live_room_status: '回看',
          live_room_creator: creator,
          function_name: '点赞',
        });
				if (e.target.classList.contains("icon-wrap")) return false;
				// 触发动画
				this.$refs.clickLike.triggerAni();
				if (this.$store.state.isYk) {
					let jointUrl = fun.getCurPageUrl('back', this.$route.params.id);
					fun.ykDisposeFun(jointUrl)
					return
				} else {
					this.clickLikeFun();
				}
    	},
				ykCover() {
				if (this.$store.state.isYk) {
					let jointUrl = fun.getCurPageUrl('back', this.$route.params.id);
					fun.ykDisposeFun(jointUrl)
					return
				}
			},
      debounce(){ //防抖动画执行
          let _this = this
          return function() {
              if(_this.timer){
                  clearTimeout(_this.timer);
                  _this.timer = setTimeout(()=>{
                    _this.$addStorageEvent(2,'hunayuan',0); //判断动画是否改变
                  },2000);
              }else{
                  _this.timer = setTimeout(()=>{
                    _this.$addStorageEvent(2,'hunayuan',0); //判断动画是否改变
                  },2000);
              }
          }()
      },
      inputFocus(){
        setTimeout(() => {
          this.isIconShow = false;
        }, 100)
      },
      //input 失去焦点  解决ios 最新版本6.7.4 input BUG
      blurRu() {
        setTimeout(() => {
          this.isIconShow = true
        }, 100)
      },
      // 快捷消息回复点击事件
      clickMessage(item){
        if (this.$store.state.isYk && window.terminal.isZxjtqhApp) {
                //游客
                  fun.ykDisposeFun();
                  return;
              } 
        this.lookBackComment = item;
        this.inputFocus()     
      },
      getQuickMessage(){
        this.$http.get("/h5live/fastReply").then(res=>{
          if(res.data.code == "000000"){
            //this.quickMessageList = ['你好','测试']
             this.quickMessageList = res.data.data;
          }
        }).catch(response => {
          console.log(response);
        });
      },
      reportBtn() { //举报按钮
       this.$store.dispatch("globalMask", {isShow: false,bgColor: ''});
       this.$emit('formChildMsg', {type: 'report',data: {'data': '举报'}});
      },
      reportLive(e) { //渲染举报Dom
        this.$store.dispatch("globalMask", {
          isShow: true,
          bgColor: 'rgba(0,0,0,0.2)'
        });
        this.isReport = true;
        // let targetDomTop = e.currentTarget.getBoundingClientRect().top;
        // let targetDomLeft = e.currentTarget.getBoundingClientRect().left;
        // let reportBox = document.querySelector(".report-box");
        // let reportImg = document.querySelector(".report-img")
        // reportBox.style.top = targetDomTop + 'px';
        // reportImg.style.top = targetDomTop + 'px';
        // reportImg.style.left = targetDomLeft + 'px';

      },
      ykCover() {
        if (this.$store.state.isYk) {
          let jointUrl = fun.getCurPageUrl('back', this.$route.params.id)
          fun.ykDisposeFun(jointUrl);
          return
        }
      },

      clickCollect() { //点击收藏
				// 神策打点（收藏 1 取消收藏 0）
				const { title, creator } = this.videoInfo.videoInfo;
				$sensorsTrack('liveBroadcast_liveRoomDetailsPageFunctionClick', {
					page_name: `回看详情页`,
					user_nickname: this.$store.state.userInfo.nickname,
					live_room_id: this.$route.params.id,
					live_room_name: title,
					live_room_status: '回看',
					live_room_creator: creator,
					function_name: ['取消收藏', '收藏'][this.isCollect ? 0 : 1],
				});
        /* if (this.$store.state.isYk) {
          let jointUrl = fun.getCurPageUrl('back', this.$route.params.id)
          fun.ykDisposeFun(jointUrl);
          return
        } */
        const liveStation = this.$route.query.liveStation === '1'; // 是否来自直小站
        if (liveStation) {
          this.isCollect ? this.collectLiveStation(0) : this.collectLiveStation(1);
        } else {
          this.isCollect ? this.collectFun(0) : this.collectFun(1);
        }
      },

      collectFun(num) { //0  取消收藏   1收藏
        this.$http.post("/h5live/scVideo?vid=" + this.videoId + "&status=" + num).then(
          res => {
            if (res.data.code == "000000" && num == "1") {
              this.isCollect = true;
              fun.toastMessage('已收藏')
            } else if (res.data.code == "000000" && num == "0") {
              this.isCollect = false;
            } else if (res.data.code == "100002" || res.data.code == "100003") {
              fun.toastMessage("你操作太频繁了", 1000)
            } else {
              console.log("收藏接口错误")
            }
          },
          err => {
            console.log(err);
          }
        );
      },
      // 来自直播小站收藏
      async collectLiveStation(num){
        if(num === 1){ // 收藏
          try {
            const res = await collectOrLike(this.videoId, 3, this.$channel)
            const { code, data, msg } = res.data;
            if (code === '000000') {
              fun.toastMessage('已收藏')
              this.isCollect = true;
            } else {
              fun.toastMessage(msg);
            }
          } catch (error) {
            throw new Error(error);
          }
        } else if (num === 0) { // 取消收藏
          try {
            const res = await cancelCollectOrLike(this.videoId, 3, this.$channel)
            const { code, data, msg } = res.data;
            if (code === '000000') {
              this.isCollect = false;
            } else {
              fun.toastMessage(msg);
            }
          } catch (error) {
            throw new Error(error);
          }
        }
      },

      clickLikeFun() {
        this.$refs.clickLike.triggerNum();
      },
      sendMsgFun() {
        if (this.lookBackComment.length > 150) {
          fun.toastMessage("留言字数过多，请重新编辑", 3000)
          return
        }
        if (this.videoInfo.videoInfo.isPl == '0') {
          fun.toastMessage("评论功能已关闭", 2000)
          this.lookBackComment = "";
          return
        }
        //发送留言
        if (this.lookBackComment != "") {
          this.$http.post("/h5live/addComment?vid=" + this.videoId + "&content=" + this.lookBackComment + "&plat=" + fun
              .getPlatform())
            .then(res => {
                if (res.data.code == "000000") {
                  if (this.videoInfo.videoInfo.plCk == '1') { //需要审核
                    fun.toastMessage("已提交，等待审核", 2000)
                  }
                  this.lookBackComment = "";
                } else {
                  fun.toastMessage(res.data.msg, 3000)
                }
              },
              err => {
                console.log(err);
              }
            );
        }
      },
      // 发送
      sendMsg() {
        // 神策打点（发言）
        const { title, creator } = this.videoInfo.videoInfo;
        $sensorsTrack('liveBroadcast_liveRoomDetailsPageFunctionClick', {
          page_name: `回看详情页`,
          user_nickname: this.$store.state.userInfo.nickname,
          live_room_id: this.$route.params.id,
          live_room_name: title,
          live_room_status: '回看',
          live_room_creator: creator,
          function_name: '发送留言',
          reply_content: this.lookBackComment
        });
        if(this.lookBackComment=='dzhconsole'){
          window.sessionStorage.setItem('dzhconsole',"dzhconsole");
          window.location.reload()
          return
        }
        if (this.$store.state.isYk) {
          fun.ykDisposeFun()
          return
        }
          this.sendMsgFun();
      },

      //ios下键盘弹出点击空白不收起问题
      clickMsgContent(e) {
        const isIphone = navigator.userAgent.toUpperCase().includes('IPHONE')
        if (isIphone) {
          this.$refs.footerInputRu.blur()
        }
        const {target,target:{nodeName,className,previousElementSibling}} = e;
        const firstNodeInnerText = previousElementSibling &&previousElementSibling.firstElementChild && previousElementSibling.firstElementChild.innerText;       
        if(nodeName.toLowerCase() ==='div'&& className ==='connect-boxText' && firstNodeInnerText !=="官方"){
            this.$emit('formChildMsg', {
                type: 'reportMsgData',
                data: {
                name:firstNodeInnerText,
                message:target.innerText	
                }
            })               
        }
      },
      getTX(txImg) {
        return txImg || imgTx
      },
      // 获取回看列表
      lookBackCommentList() {//舍弃
        let _this = this;
        _this.page = 1;
        //请求回看视频的评论列表         vid=48&page=1
        _this.$http
          .get("/h5live/getComment?vid=" + _this.videoId + "&page=" + _this.page)
          .then(
            res => {
              let msgHtml = "";
              if (res.data.code == "000000") {

                _this.dataMsg = res.data.data.items;
                _this.totalPage = res.data.data.totalPage
                let messageHtml = "";
                //type 0是留言  1是点赞  2是红包  3是答题  4是问卷  5是投票
                if (_this.dataMsg.length == 0) {
                  _this.isNoComment = true; //显示沙发图
                } else {
                  _this.isNoComment = false; //隐藏沙发图
                  _this.dataMsg.forEach(function(ele, index) {
                    if (ele.type == '6') {
                      //回复用户消息
                      if (_this.isJSON(ele.content)) {
                        let itemEle = JSON.parse(ele.content)
                        messageHtml = `
										<li class="msg-li-li">
											<div class="li-msg-left"><img onerror="imgError()" src=${ele.avator && ele.avator!=null && ele.avator +'?x-oss-process=image/resize,m_fixed,h_70,w_70' || imgTx}></div>
											<div class="li-msg-right">
												<p class="nickBox">
													<span class="officialRuan">官方</span>
													<span class="nikeNameRuan">${ele.nick}</span>
													<span class="liveTimeRuan">${ele.addTime}</span>
												</p>
												<div class="connect-boxText">
													<p class="reply-box">
														<span class="reply-name">@${itemEle.parent.nickName}</span>
														<span class="reply-msg">${itemEle.msg}</span>
													</p>
													<div class="replied-box">
														<p class="replied-info">
															<span class="replied-name">${itemEle.parent.nickName}</span>
															<span class="replied-time">${itemEle.parent.addTime}</span>
														</p>
														<p class="replied-msg">${itemEle.parent.message}</p>
													</div>
												</div>
											</div>
										</li>`
                      }
                    } else {
                      let zbzlMsg = '';
                      let myMsg = '';
                      let highlightMe = '';
                      if (ele.ac.includes('zbzlpt') || ele.ac == _this.videoInfo.videoInfo.creator) { //直播小助理发言
                        zbzlMsg = '<span class="officialRuan">官方</span>'
                      }
                      if (ele.ac == _this.currentUn) {
                        myMsg = '<span class="my-tip">我</span>'
                        highlightMe = 'highlight-me'
                      }
                      messageHtml = `<li class="msg-li-li ${highlightMe}">
															<div class="li-msg-left"><img onerror="imgError()" src=${ele.avator && ele.avator!=null && ele.avator +'?x-oss-process=image/resize,m_fixed,h_70,w_70' || imgTx}></div>
															<div class="li-msg-right">
																<p class="nickBox">
																	${zbzlMsg}
																	<span class="nikeNameRuan">${ele.ac == _this.videoInfo.videoInfo.creator?'主播':ele.nick}</span>
																	${myMsg}
																	<span class="liveTimeRuan">${ele.addTime}</span>
																</p>
																<div class="connect-boxText">${fun.searchIphoneNum(ele.content)}</div>
															</div>
														</li>`
                    }
                    msgHtml += messageHtml;
                  });

                }

                _this.$refs.msgContent.innerHTML = msgHtml;
                let scrollTop = _this.$refs.msgContentBox.scrollTop;
                if (scrollTop != 0) {
                  _this.$refs.msgContentBox.scrollTop = 0
                }
              }
            },
            err => {
              console.log(err);
            }
          );
      },
      //头像处理
      getLookbackTX(txImg) {
        let img
        img = txImg || imgTx
        return img.replace("http://", "//")
      },
      // 是否是JSON
      isJSON(str) {
        if (typeof str == 'string') {
          try {
            var obj = JSON.parse(str);
            if (typeof obj == 'object' && obj) {
              return true;
            } else {
              return false;
            }
          } catch (e) {
            return false;
          }
        }
      },
      //置顶留言 展开 收起
      clickToggle() {
        if (this.isEllipsis) {
          this.isShow = !this.isShow
          let topMsg = document.getElementById('live-top-msg')
          if (this.isShow) {
            topMsg.innerHTML = this.videoInfo.videoInfo.memo
          } else {
            topMsg.innerHTML = this.topMsgText
          }
        }
      },
      //置顶留言展示省略号
      topMsgStyle() {
        let liveTop = document.getElementById('live-top-msg');
        let liveTopText = liveTop.innerHTML; //获取内容
        let currentContentHeight = liveTop.clientHeight; //获取内容当前的高度
        if (currentContentHeight > 42) { //两行内容高度
          for (let i = 0; currentContentHeight > 42; i++) {
            liveTopText = liveTopText.substring(0, liveTopText.length - 1);
            liveTop.innerHTML = liveTopText;
            currentContentHeight = liveTop.clientHeight;
          }
          //得到正好符合高度的字符 删除最后一个变为省略号 填充在页面里
          let newText = liveTopText.substring(0, liveTopText.length - 1);
          if (newText.indexOf('**群')) {
            let currentText = newText.replace("群", "");
            this.topMsgText = currentText;
          } else {
            this.topMsgText = newText
          }
          this.isEllipsis = true
        }
        liveTop.innerHTML = this.isShow ? this.videoInfo.videoInfo.memo : this.topMsgText
      },

    },
    filters: {
      //过滤传过来的时间
      lookBack_time: function(type) {
        return type.slice(5, 10) + " " + type.slice(11, 16);
      },
    },
    watch: {
      //监听底部按钮颜色变化
      lookBackComment() {
        if (this.lookBackComment && this.videoInfo.videoInfo.isPl != '0') {
          this.isSend = true;
          this.sendClass = 'send-red'
        } else {
          this.isSend = false;
          this.sendClass = ''
        }
      },
      '$store.state.globalMask.isShow'() {
        if (!this.$store.state.globalMask.isShow) {
          this.isReport = false;
        }
      },
      sysInfo() {

      }
    },

  }
</script>

<style scoped="scoped" lang="less">
.msg-wrap{
    width: 100%;
    flex: 1;
    // background: rgb(146, 82, 82);
    /* overflow-y: scroll; */
    overflow-x: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}
  .no-nav-message-box {
    width: 100vw;
    height: 100%;
    background: white;
    overflow-y: scroll;
  }

  .nav-message-box {
    width: 100%;
    flex: 1;
    // background: rgb(146, 82, 82);
    overflow-y: scroll;
    position: relative;
  }

  .header-conatiner-zxyhIos~.no-nav-message-box {
    height: calc(100% - 654px);
  }

  .header-conatiner-zxyhIos~.nav-message-box {
    height: calc(100% - 724px);
  }

  .no-nav-message-box-zyzq {
    width: 100vw;
    height: calc(100% - 680px);
    background: white;
    overflow-y: scroll;
    padding: 0 40px 10px 20px;
  }

  .nav-message-box-zyzq {
    width: 100vw;
    height: calc(100% - 750px);
    background: white;
    overflow-y: scroll;
  }

  .comment-look {
    width: 100vw;
    height: calc(100% - 596px);
    background: white;
    overflow-y: scroll;
    padding: 0 40px 20px 20px;
    z-index: 3;
  }

  .comment-look-zyzq {
    width: 100vw;
    height: calc(100% - 684px);
    background: white;
    overflow-y: scroll;
    padding: 0 40px 20px 20px;
    z-index: 3;
  }
  .msg-content{
    padding-bottom: 55px;
  }
  .msg-content li {
    width: 100%;
    height: auto;
  }

  /*直播间改造留言区域css*/

  .msg-content/deep/.msg-li-li {
    display: flex;
    padding: 0 20px;
  }

  .msg-content/deep/.highlight-me {
    background: rgba(227, 231, 255, 0.39);
  }

  .msg-content/deep/.msg-li-li .li-msg-left {
    width: 70px;
    /*background: pink;*/
  }

  .msg-content/deep/.msg-li-li .li-msg-right {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .msg-content/deep/.msg-li-li .li-msg-left img {
    width: 70px;
    height: 70px;
    margin: 10px 0 0 0;
    background-position: 70px 70px;
    border-radius: 100%;
    border: 2px solid #ebebeb;
  }

  .msg-content/deep/.nickBox {
    color: #9da2a5;
    font-size: 28px;
    margin: 10px 0 0 20px;
    display: flex;
    align-items: center;
    flex: 1;
  }

  .reply-nick-box .reply-name {
    font-size: 24px;
    color: #8A8B8C;
    ;
  }

  .msg-content/deep/.liveTimeRuan {
    font-size: 22px;
    color: #cbcccb;
    margin-left: 20px;
  }

  .msg-content/deep/.connect-boxText {
    flex: 1;
    margin: 10px 0 0 20px;
    font-size: 28px;
    color: #0c0c0c;
    text-align: justify;
    line-height: 36px;
    word-wrap: break-word;
    word-break: break-all;
    width: fit-content;
  }

  .sysInfo-ul li {
    display: flex;
    padding: 0 20px;
  }

  .sysInfo-ul li .nickBox {
    color: #9da2a5;
    font-size: 28px;
    margin: 10px 0 0 20px;
    display: flex;
    align-items: center;
    flex: 1;
  }

  .sysInfo-ul .liveTimeRuan {
    font-size: 22px;
    color: #cbcccb;
    margin-left: 20px;
  }

  .sysInfo-ul .li-msg-right {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .sysInfo-ul .connect-boxText {
    flex: 1;
    margin: 10px 0 0 20px;
    font-size: 28px;
    color: #0c0c0c;
    text-align: justify;
    line-height: 30px;
    word-wrap: break-word
  }

  .sysInfo-ul .li-msg-right {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .sysInfo-ul li img {
    width: 70px;
    height: 70px;
    margin: 10px 0 0 0;
    background-position: 70px 70px;
    border-radius: 100%;
    border: 2px solid #ebebeb;
  }

  #live-red {
    /*display: flex;
		align-items: flex-end;*/
    position: relative;
    color: black;
    text-align: justify;
    line-height: 36px;
    word-break: break-all;
  }

  /*#live-red .main-content{
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical
	}*/

  #live-red/deep/a {
    color: inherit !important;
  }

  #live-red a {
    text-decoration: underline !important;
    background: transparent !important;
  }

  #comment-imgicon {
    width: 48px;
    height: 40px;
    display: block;
    background: url(../../../../assets/images/icon.png);
    background-size: 120px 250px;
    background-position: -0px -150px;
    margin: 0 0 0 10px;
  }

  /* 回复 */

  .msg-content/deep/.officialRuan {
    display: inline-block;
    width: 70px;
    background: linear-gradient(141deg, rgba(177, 98, 216, 0.9), rgba(165, 9, 243, 0.9));
    border-radius: 6px;
    line-height: normal;
    padding: 2px 0 3px;
    text-align: center;
    color: white;
    font-size: 22px;
    margin-right: 6px;
  }

  .msg-content/deep/.reply-name {
    font-size: 28px;
    margin-right: 7px;
  }

  .msg-content/deep/.replied-box {
    background: #F7F7F7;
    margin-top: 17px;
    padding: 20px 10px 20px 30px;
  }

  .msg-content/deep/.replied-box .replied-name {
    font-size: 24px;
    color: #8A8B8C;
  }

  .msg-content/deep/.replied-box .replied-time {
    color: #CBCBCB;
    font-size: 20px;
    margin-left: 20px;
  }

  .msg-content/deep/.replied-box .replied-msg {
    color: #8A8B8C;
    margin-top: 10px;
    font-size: 24px;
    line-height: 30px;
    word-wrap: break-word;
    word-break: break-all;
  }

  .msg-content/deep/.nick-name {
    flex: 1;
    margin: 10px 0 0 20px;
    font-size: 28px;
    color: gold;
    text-align: justify;
    line-height: 30px;
    word-wrap: break-word
  }

  .msg-content/deep/.hiddenRuan {
    display: none;
  }

  /* 调整后样式 */

  .name-art {
    color: #CB3537;
    font-size: 28px;
  }

  .reply-msg-box {
    width: 605px;
    background: #F7F7F7;
    margin-top: 17px;
    padding: 4px 10px 15px 0px;
    margin-left: 0 !important;
    float: left;
  }

  .reply-nick-box {
    padding-left: 31px;
    margin-top: 8px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 24px;
  }

  .reply-name {
    font-size: 24px;
    color: #8A8B8C;
  }

  .reply-time {
    color: #CBCBCB;
    font-size: 20px;
    margin-left: 20px;
  }

  .reply-text {
    padding-left: 31px;
    color: #8A8B8C;
    margin-top: 10px;
    font-size: 24px;
    line-height: 30px;
    word-wrap: break-word;
    word-break: break-all;
  }

  /* 回复 */

  .msg-content/deep/.officialRuan {
    display: inline-block;
    width: 70px;
    background: linear-gradient(141deg, rgba(177, 98, 216, 0.9), rgba(165, 9, 243, 0.9));
    border-radius: 6px;
    line-height: normal;
    padding: 2px 0 3px;
    text-align: center;
    color: white;
    font-size: 22px;
    margin-right: 6px;
  }

  .msg-content/deep/.officialRuan-hidden {
    display: none;
  }

  .msg-content/deep/.reply-name {
    color: #CB3537;
    font-size: 28px;
    margin-right: 7px;
  }

  .msg-content/deep/.replied-box {
    background: #F7F7F7;
    margin-top: 17px;
    padding: 20px 10px 20px 30px;
  }

  .msg-content/deep/.replied-box .replied-name {
    font-size: 24px;
    color: #8A8B8C;
  }

  .msg-content/deep/.replied-box .replied-time {
    color: #CBCBCB;
    font-size: 20px;
    margin-left: 20px;
  }

  .msg-content/deep/.replied-box .replied-msg {
    color: #8A8B8C;
    margin-top: 10px;
    font-size: 24px;
    line-height: 30px;
    word-wrap: break-word;
    word-break: break-all;
  }

  .msg-content/deep/.nick-name {
    flex: 1;
    margin: 10px 0 0 20px;
    font-size: 28px;
    color: gold;
    text-align: justify;
    line-height: 30px;
    word-wrap: break-word
  }

  .msg-content/deep/.my-tip {
    display: inline-block;
    background: linear-gradient(-30deg, #148EE3, #29D0EE);
    border-radius: 6px;
    line-height: normal;
    padding: 2px 10px 3px;
    text-align: center;
    color: white;
    font-size: 20px;
    margin-left: 10px;
  }

  .no-comment-box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
  }

  .no-comment {
    width: 100%;
    height: 338px;
    background: url(../../../../assets/images/shafa.png) no-repeat top center;
    background-size: 369px 169px;
  }

  .icon-box {
    position: absolute;
    right: 0;
    bottom: -5px;
  }

  .iconfont.iconspread-line,
  .iconfont.iconshouqi-copy {
    margin-left: 10px;
    font-size: 32px;
    color: #cc3538;
    font-weight: bold;
  }
  
  .comment-footer {
    width: 100%;
    height: 100px;
    z-index: 10;
    background: white;
    position: relative;
    /*background: darkcyan;*/
    // position: fixed;
    // bottom: 0;
    // left: 0;
    // height: calc(100px + constant(safe-area-inset-bottom));
		// height: calc(100px + env(safe-area-inset-bottom));
		// padding-bottom: calc(constant(safe-area-inset-bottom));
    // padding-bottom: calc(env(safe-area-inset-bottom)); 
  }

  .yk-cover {
    width: 100%;
    height: 100px;
    background: transparent;
    /*  background: saddlebrown;*/
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 15;
  }

  .comment-box {
    width: 100%;
    border-top: 1px solid #e2e2e2;
    padding: 0 20px;
    height: 100px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .comment-box textarea {
    flex: 1;
    height: 78px;
    font-size: 30px;
    float: left;
    background: rgba(246, 246, 246, 1);
    border-radius: 23px 0 0 23px;
    border-top: none;
    border-bottom: none;
    outline: none;
    border-right: 2px solid rgba(241, 241, 241, 1);
    padding-left: 25px;
    padding-top: 20px;
    line-height: 40px;

  }

  .input-big-box {
    flex: 1;
    display: flex;
    height: 78px;
    background: rgba(246, 246, 246, 1);
    border-radius: 23px;
  }

  .input-big-box-zxyh {
    width: 490px;
    flex: 1;
    display: flex;
    height: 78px;
    background: rgba(246, 246, 246, 1);
    border-radius: 23px;
    background: transparent;
    position: absolute;
  }

  .input-big-box p {
    width: 90px;
    height: 100%;
    border-radius: 0 23px 23px 0;
    display: inline-block;
    text-align: center;
    float: left;
    line-height: 78px;
    font-size: 28px;
  }

  textarea::placeholder {
    color: #C4C4C4;
  }

  .send-red {
    color: #cc3538;
  }


  .num-box {
    height: 60px;
    width: 60px;
  }

  .num-box i {
    height: 60px;
    width: 60px;
  }

  .zan-red {
    /*2021/10/21 已点赞和点赞效果图一致 */
    background: url('../../../../assets/images/lookBack/zan_l.png') no-repeat;
    background-size: 100% 100%;
    user-select:none;
  	-webkit-user-select: none;
  	-moz-user-select: none;
  }

  .zan-gray {
    background: url('../../../../assets/images/lookBack/zan_l.png') no-repeat;
    background-size: 100% 100%;
    user-select:none;
  	-webkit-user-select: none;
  	-moz-user-select: none;
  }



  .shoucang-box {
    width: 100px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .shoucang-box i {
    height: 60px;
    width: 60px;
  }

  .shoucang-box p {
    width: 75px;
    height: 100px;
    color: #bfbfbf;
    font-size: 24px;
    line-height: 100px;
    text-align: center;
  }

  .shoucang {
    font-size: 52px;
    color: #bfbfbf;
    margin-left: 0px;
    background: url('../../../../assets/images/lookBack/shoucang.png') no-repeat;
    background-size: 100% 100%;
  }

  .shoucangRed {
    margin-left: 0px;
    color: #CC3538;
    font-size: 52px;
    background: url('../../../../assets/images/lookBack/hasShoucang.png') no-repeat;
    background-size: 100% 100%;
  }

  .shoucang-box .shoucangRed+p {
    color: #CC3538;
  }

  /*.YK-cover {
		width: 89%;
		height: 100%;
		background: transparent;
		position: relative;
		bottom: 0;
		left: 0;
		z-index: 1000;
	}*/
  .report-box {
    /* border: 2px blue solid; */
    /* width: 200px; */
    height: 77px;
    position: absolute;
    border-radius: 8px;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 29px 0 24px;
    left: 120px;
    top: 10px;
    z-index: 1502;
  }

  .report-box::before {
    content: '';
    width: 0;
    height: 0;
    border: 14px solid;
    position: absolute;
    top: 12px;
    left: -24px;
    z-index: 1502;
    border-color: transparent transparent white;
    transform: rotate(-90deg);
  }

  /*  .report-box::after{
      content: '';
      width: 0;
      height: 0;
      border: 20px solid;
      position: absolute;
      top: -38px;
      left: 20px;
      border-color:  transparent transparent white;
    } */
  .report-box p {
    font-size: 30px;
    font-weight: 400;
    color: #333333;
    margin-right: 18px;
  }

  .report-box img {
    width: 36px;
    height: 36px;
  }

  .report-img {
    width: 70px;
    height: 70px;
    background-position: 70px 70px;
    border-radius: 100%;
    border: 2px solid #ebebeb;
    position: absolute;
    left:20px;
    top: 9px;
    z-index: 1503;
  }

  /* 快捷消息回复 */
  .quickMessage{
    width: calc( 100% - 140px );
    /* height: 50px; */
    padding: 5px 20px;
    padding-left: 30px;
    padding-top: 8px;
    overflow-x: scroll;
    overflow-y: hidden;
    position: absolute;
    left: 0;
    bottom: 100px;
    background: #FFFFFF;
  }
  .quickMessage-zxjtqh{
    bottom: 163px;
  }
  .quickMessage ul{
    /* height: 40px; */
    white-space:nowrap;
    overflow-x: scroll;
  }
  .quickMessage ul li{
    /* height: 32px; */
    display: inline-block;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    border: 2px solid #979797;
    font-size: 26px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 30px;
    text-align: center;
    padding: 6px 10px 5px 11px;
  }
  .quickMessage ul li:not(:nth-child(1)){
    margin-left: 15px;
  }

  /* 点赞效果q弹 */
  .zanBoxImg{
    animation: keyNavBottom 0.3s ease-in;
  }
   @keyframes keyNavBottom{
    	0%{
    		transform: scale(1);
    	}
    	25%{transform: scale(1.1);
     }
    	50%{transform: scale(0.9);
     }
     75%{transform: scale(1.1);
     }
    	100%{
    		transform: scale(1);
    	}
    }
    // .message-box{
    //   position: absolute;
    // }
</style>
